<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        
        <!-- v-model如果用在select中，也是语法糖 -->
        <!-- 
            只不过他帮你生成的是 :value="数据" 以及 @change="$event.target.value"
            跟输入框的双向绑定其实是一样的，只不过vue内部会判断
            如果v-model加在输入框，那么监听的是input事件
            如果加在下拉框、多选框、单选框等，都是监听的change事件
         -->
        <!-- select也是有value属性的啊 -->
        <!-- <select :value="fruit" @change="change"> -->
        <!-- <select :value="fruit" @change="fruit = $event.target.value">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select> -->

        <!-- <select v-model="fruit">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select> -->


        <!-- v-model其实用在input时，也是可以监听的是change事件的 -->
        <!-- 只不过要加lazy，所以你加lazy，相当于他的原理监听的就不是input事件了 -->
        <!-- 而是change事件，因为对于change事件而言，就是要按回车或者失去焦点才代表输入完了 -->
        <!-- <input type="text" v-model.lazy="msg"> -->
        <!-- <input type="text" @change="change"> -->

        <!-- <p>{{ msg }}</p> -->

        <!-- 复选框是根据checked来控制选中状态的 -->
        <!-- 写上就是true -->
        <!-- 不写就是false -->
        <!-- 所以如果你写一个v-model="chk" -->
        <!-- 他其实相当于帮你生成 -->
        <!-- :checked="chk" 以及 @change="" -->
        <input type="checkbox" v-model="chk">

        <!-- 
            总而言之可以发现，v-model就是个语法糖
            只不过vue内部会帮你做判断
                如果用在输入框
                    生成的是 :value="数据"  以及 @input="数据 = $event.target.value"

                如果用在下拉框
                    生成的是： :value="数据"  以及 @change="数据 = $event.target.value"
                
                如果用在多选框
                    生成的是： :checked="数据"  以及 @change="数据 = $event.target.checked"
         -->

    </div>

    <script src="./vue.js"></script>
   <script>
       // 找到下拉框
    //    document.querySelector('select').value = 'banana'

    // 找到复选框
    // console.log( document.querySelector('input').checked )

    new Vue({
        el: '#app',
        data() {
            return {
                fruit: 'banana',
                msg: 'hello',
                chk: true
            }
        },
        methods: {
            change (e) {
                console.log('...')
            }
        }
    })
   </script>
</body>
</html>